<!-- 盲盒购买页面 -->
<template>
  <s-layout title="盲盒花礼" tabbar="/pages/activity/blindbox/index">
    <view class="container">
      <!-- 主内容区 -->
      <view class="main-content" :class="{ 'main-shift': sidebarShow }">

        <!-- 原有内容区域（色彩/风格/价格/包装选择） -->
        <view class="content">
          <!-- 色彩喜好区域 -->
          <view class="section">
            <view class="section-title">色彩喜好：</view>
            <view class="section-content">
              <view class="color-list">
                <view v-for="(color, index) in colorOptions" :key="index" class="color-item"
                  :class="{ 'selected': color.value === selectedColor }" @click="selectColor(color.value)">
                  <view class="color-dot" :style="{ backgroundColor: color.code }"></view>
                  <view class="color-text">{{ color.text }}</view>
                </view>
              </view>
            </view>
          </view>

          <!-- 风格喜好区域 -->
          <view class="section">
            <view class="section-title">风格喜好：</view>
            <view class="section-content">
              <view class="style-list">
                <view v-for="(style, index) in styleOptions" :key="index" class="style-item"
                  :class="{ 'selected': style.value === selectedStyle }" @click="selectStyle(style.value)">
                  <image :src="style.img" mode="aspectFit" class="style-img" />
                  <view class="style-text">{{ style.text }}</view>
                </view>
              </view>
            </view>
          </view>

          <!-- 价格预算区域 -->
          <view class="section">
            <view class="section-title">价格预算：</view>
            <view class="section-content">
              <view class="price-list">
                <view v-for="(price, index) in priceOptions" :key="index" class="price-item"
                  :class="{ 'selected': price === selectedPrice }" @click="selectPrice(price)">
                  {{ price }}
                </view>
              </view>
              <view class="price-tip">(如需更高价位，请联系门店客服)</view>
            </view>
          </view>

          <!-- 包装选择区域 -->
          <view class="section">
            <view class="section-title">包装选择：</view>
            <view class="section-content">
              <view class="package-list">
                <view v-for="(pkg, index) in packageOptions" :key="index" class="package-item"
                  :class="{ 'selected': pkg.value === selectedPackage }" @click="selectPackage(pkg.value)">
                  <image :src="pkg.img" mode="aspectFit" class="package-img" />
                  <view class="package-text">{{ pkg.text }}</view>
                </view>
              </view>
              <view class="package-tip">(所有包装除花束外169元起)</view>
              <view class="package-tip">(花束制作完成后，如需改动，需支付花礼费用50%)</view>
              <!-- 订购按钮 -->
              <view class="order-btn" @click="handleOrder">即刻订购</view>
            </view>
          </view>


        </view>
      </view>
    </view>
  </s-layout>
</template>

<script>
export default {
  data() {
    return {
      // 侧边栏控制
      sidebarShow: false, // 侧边栏是否展开
      sidebarMenus: [
        { name: '首页', path: '/' },
        { name: '花艺分类', path: '/categories' },
        { name: '热门推荐', path: '/hot' },
        { name: '我的订单', path: '/orders' },
        { name: '会员中心', path: '/member' },
        { name: '关于我们', path: '/about' },
      ],

      // 原有选项数据
      colorOptions: [
        { code: '#C91F37', text: '红', value: 'red' },
        { code: '#F59E0C', text: '橙', value: 'orange', selected: true },
        { code: '#FACC15', text: '黄', value: 'yellow' },
        { code: '#22C55E', text: '绿', value: 'green' },
        { code: '#3B82F6', text: '蓝', value: 'blue' },
        { code: '#8B5CF6', text: '紫', value: 'purple' },
        { code: '#EC4899', text: '粉', value: 'pink' },
        { code: '#92400E', text: '棕', value: 'brown' },
        { code: '#D8B4FE', text: '银', value: 'silver' },
        { code: '#1F2937', text: '黑', value: 'black' },
        { code: '#F9FAFB', text: '白', value: 'white' },
        { code: '#9CA3AF', text: '灰', value: 'gray' },
      ],
      selectedColor: 'orange',

      styleOptions: [
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3cde6a192.jpg', text: '自然系', value: 'nature' },
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3cde2e5fb.jpg', text: '中式', value: 'chinese', selected: true },
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3cdec5756.jpg', text: '极简', value: 'minimal' },
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3cdfc547a.jpg', text: '多巴胺', value: 'dopamine' },
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3ce06fa33.jpg', text: '复古', value: 'vintage' },
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3ce0c4eb8.jpg', text: '暗黑系', value: 'dark' },
      ],
      selectedStyle: 'chinese',

      priceOptions: [69, 109, 169, 209, 259, 369, 489, 569, 999, 1999],
      selectedPrice: 169,

      packageOptions: [
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3cde6a192.jpg', text: '花束', value: 'bouquet', selected: true },
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3d272a21a.jpg', text: '花盒', value: 'box' },
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3d47cd4d2.jpg', text: '花篮', value: 'basket' },
        { img: 'http://49.233.144.92:7791/i/2025/11/17/691b3d624f23e.jpg', text: '抱抱桶', value: 'barrel' },
      ],
      selectedPackage: 'bouquet',
    }
  },
  methods: {
    // 切换侧边栏显示/隐藏
    toggleSidebar() {
      this.sidebarShow = !this.sidebarShow;
      // 禁止/允许背景滚动
      const body = document.body;
      if (this.sidebarShow) {
        body.style.overflow = 'hidden';
      } else {
        body.style.overflow = '';
      }
    },

    // 侧边栏菜单点击事件
    handleMenuClick(item) {
      uni.showToast({ title: `跳转到${item.name}`, icon: 'none' });
      // 实际项目中可使用 uni.navigateTo 跳转页面
      // uni.navigateTo({ url: item.path });
      this.toggleSidebar(); // 点击后关闭侧边栏
    },

    // 联系客服
    handleContact() {
      uni.showToast({ title: '联系客服功能待开发', icon: 'none' });
      this.toggleSidebar();
    },

    // 原有选择逻辑（色彩/风格/价格/包装）
    selectColor(value) {
      this.selectedColor = value;
    },
    selectStyle(value) {
      this.selectedStyle = value;
    },
    selectPrice(price) {
      this.selectedPrice = price;
    },
    selectPackage(value) {
      this.selectedPackage = value;
    },
    handleOrder() {
      uni.showToast({ title: '订购逻辑待开发', icon: 'none' });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}

/* 侧边栏样式 */
.sidebar-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  transition: opacity 0.3s;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 70%;
  max-width: 300px;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
  transform: translateX(-100%);
  transition: transform 0.3s;
  overflow-y: auto;

  &.sidebar-show {
    transform: translateX(0);
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1px solid #eee;

    .sidebar-title {
      font-size: 36rpx;
      font-weight: bold;
    }

    .close-btn {
      font-size: 40rpx;
      color: #666;
      cursor: pointer;
    }
  }

  .sidebar-menu {
    padding: 20rpx 0;

    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25rpx 30rpx;
      border-bottom: 1px solid #f5f5f5;
      cursor: pointer;

      .menu-text {
        font-size: 32rpx;
      }

      .menu-arrow {
        font-size: 28rpx;
        color: #999;
      }

      &:active {
        background-color: #f5f5f5;
      }
    }
  }

  .sidebar-footer {
    padding: 30rpx;
    border-top: 1px solid #eee;
    margin-top: 20rpx;

    .footer-btn {
      width: 100%;
      height: 80rpx;
      background-color: #000;
      color: #fff;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8rpx;
      margin-bottom: 20rpx;
      cursor: pointer;
    }

    .footer-text {
      font-size: 24rpx;
      color: #999;
      text-align: center;
    }
  }
}

/* 主内容区样式 */
.main-content {

  .navbar {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

    .menu-icon {
      font-size: 40rpx;
      margin-right: 20rpx;
      cursor: pointer;
    }

    .navbar-title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
}

/* 左右布局样式 */
.section {
  display: flex;
  gap: 30rpx;

  .section-title {
    font-size: 28rpx;
    color: #fff;
    min-width: 120rpx;
    padding-top: 66rpx;
    padding-left: 20rpx;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .section-content {
    flex: 1;
    padding-top: 66rpx;
    padding-bottom: 32rpx;
  }
}

/* 调整各选项列表的布局 */
.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  color: #fff;
}

.style-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding-bottom: 20rpx;
  color: #fff;
}

.price-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.package-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding-bottom: 20rpx;
}

.color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;

  .color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80rpx;
    cursor: pointer;

    .color-dot {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      margin-bottom: 8rpx;
    }

    .color-text {
      font-size: 24rpx;
    }

    &.selected {
      position: relative;

      &::before {
        content: '✓';
        position: absolute;
        top: 6rpx;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20rpx;
        font-weight: bold;
        z-index: 1;
      }

      .color-dot {
        border: 2rpx solid #fff;
        box-shadow: 0 0 10rpx #fff;
      }

      .color-text {
        font-weight: bold;
      }
    }
  }
}

.style-list {
  display: flex;
  overflow-x: auto;
  gap: 20rpx;
  padding-bottom: 20rpx;

  .style-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160rpx;
    cursor: pointer;

    .style-img {
      width: 100%;
      height: 120rpx;
      border-radius: 8rpx;
      margin-bottom: 8rpx;
    }

    .style-text {
      font-size: 24rpx;
    }

    &.selected {
      position: relative;

      &::before {
        content: '✓';
        position: absolute;
        top: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50rpx;
        font-weight: bold;
      }

      .style-img {
        border: 2rpx solid #fff;
        box-shadow: 0 0 10rpx #fff;
      }

      .style-text {
        font-weight: bold;
      }
    }
  }
}

.price-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;

  .price-item {
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    color: #fff;
    cursor: pointer;

    &.selected {
      color: #fff;
      font-weight: bold;
      position: relative;

      &::before {
        content: '✓';
        position: absolute;
        top: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50rpx;
        font-weight: bold;
      }
    }
  }
}

.price-tip {
  font-size: 24rpx;
  color: #FFF;
  margin-top: 10rpx;
}

.package-list {
  display: flex;
  overflow-x: auto;
  gap: 20rpx;
  padding-bottom: 20rpx;

  .package-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120rpx;
    cursor: pointer;

    .package-img {
      width: 100%;
      height: 120rpx;
      border-radius: 8rpx;
      margin-bottom: 8rpx;
    }

    .package-text {
      font-size: 24rpx;
      color: #FFF;
    }

    &.selected {
      position: relative;

      &::before {
        content: '✓';
        position: absolute;
        top: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50rpx;
        font-weight: bold;
      }

      .package-img {
        border: 2rpx solid #fff;
        box-shadow: 0 0 10rpx #fff;
      }

      .package-text {
        font-weight: bold;
      }
    }
  }
}

.package-tip {
  font-size: 24rpx;
  color: #FFF;
  margin-top: 10rpx;
}

.order-btn {
  width: 96%;
  height: 90rpx;
  background-color: #000;
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  margin-top: 40rpx;
  cursor: pointer;
}
</style>